<template>
  <div id="app">
    <ul>
      <li @click="cate()">全部</li>
      <li @click="cate(0)">学习</li>
      <li @click="cate(1)">工作</li>
      <li @click="cate(2)">热门</li>
    </ul>
    <button @click="dialogVisible = true">新增</button>
    <div class="blog">
      <NavItem v-for="item in $store.state.menuList.MenuList" :key="item.id" :menuitem="item" />
    </div>

    <el-dialog title="提示" :visible="dialogVisible" width="30%">
      标题
      <el-input v-model="form.title"></el-input>
      内容
      <el-input v-model="form.content"></el-input>
      类型
      <el-select v-model="form.isCate" placeholder="选择类型">
        <el-option label="学习" :value="0"></el-option>
        <el-option label="工作 " :value="1"></el-option>
        <el-option label="热门 " :value="2"></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subMethods">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import NavItem from "./components/NavItem.vue";
interface Iform {
  id: number;
  isCate: number;
  title: string;
  content: string;
}
@Component({
  components: {
    NavItem
  }
})
export default class App extends Vue {
  // 弹出框展示
  dialogVisible: boolean = false;
  // 增加内容展示
  form: Iform = {
    isCate: 0,
    id: -1,
    title: "",
    content: ""
  };
  // 点击确定事件
  subMethods(): void {
    this.$store.commit('Add',this.form);
    this.form.title = ''
    this.form.content = ''
    this.dialogVisible = false;
  }
  // 筛选类型
  cate(isCate:number):void{
    this.$store.commit('Cate',isCate);
  }
}
</script>

<style>
ul {
  display: flex;
  justify-content: space-around;
}
li {
  list-style-type: none;
  padding: 10px 30px;
  font-size: 20px;
  font-weight: 800;
  background: chartreuse;
}
.blog {
  display: flex;
  flex-wrap: wrap;
}
</style>
